<!--标注关系使用 不要删除-->
<template>
  <div class="annotation-main" id="annotation">
    <div class="entity">
      <div class="relationBlock">
        <el-form
          :inline="true"
          class="entity-search km-form"
          @submit.native.prevent
        >
          <el-form-item>
            <el-input
              class="km-input"
              v-model="relationSearch"
              placeholder="关系搜索"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              class="km-button"
              @click="onRelationSearch"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
        <div class="relation-tree">
          <div v-if="relationListShow === null">没有关系</div>
          <div v-else>
            <div v-if="relationListShow.length == 0">没有关系2</div>
            <div v-else class="relation-tree-list">
              <el-radio-group
                v-model="selectedCategoryId"
                class="relation-tree-list"
              >
                <el-radio
                  border
                  v-for="relation in relationListShow"
                  :label="relation.relationId"
                  :key="relation.relationId"
                  >{{ relation.relationShowName }}</el-radio
                >
              </el-radio-group>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="article" id="article">
      <div class="article-tool-bar">
        <div class="controlPanel"></div>
        <div>
          <el-button @click="showChangeFun" size="small" type="primary"
            >返回实体创建</el-button
          >
        </div>
      </div>

      <div id="container"></div>
    </div>
    <EntityDialog ref="entityRef" @addNode="addNode" />
  </div>
</template>

<script>
import G6 from "@antv/g6"; //注意引入
import EntityDialog from "./entityDialog.vue";
export default {
  components: { EntityDialog },
  data() {
    return {
      isShowAnnotation: false,
      graph: {}, //定义一个graph对象
      dataGap: {
        //定义一个公共数据数组
        id: "root",
        label: "实体",
        img: "",
        children: [],
      },
      treeData: [],
      // 搜索关系
      relationSearch: "",
      selectedCategoryId: null,
      relation: {},
      relationListShow: [],
    };
  },
  props: {
    resultArr: {
      type: Array,
      default: () => [],
    },
    relationListInDom: {
      type: Array,
      default: () => [],
    },
    width: {
      type: Number,
      default: 0,
    },
    height: {
      type: Number,
      default: 0,
    },
    relationTree: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    canvasArr() {
      return this.resultArr;
    },
    relationList() {
      return this.relationListInDom;
    },
  },
  watch: {
    canvasArr(val) {
      console.log(
        "%c [  ]-122",
        "font-size:13px; background:pink; color:#bf2c9f;",
        Object.keys(this.graph).length
      );
      if (Object.keys(this.graph).length == 0) {
        // 实体树的初始化操作
        if (Object.keys(this.relationTree).length > 0) {
          this.dataGap = this.relationTree;
        } else {
          let childArr = [];
          val.forEach((item) => {
            childArr.push({
              id: item.entityId,
              entityTypeId: item.entityTypeId,
              entityId: item.entityId,
              label: item.propertyName,
              img: item.entityName,
              children: [],
            });
          });
          this.dataGap.children = childArr;
        }
        this.render();
      }
    },
    relationList(val) {
      this.relationListShow = val;
    },
  },
  methods: {
    showChangeFun() {
      this.$emit("change");
    },
    // async init(obj) {
    //   this.isShowAnnotation = true;
    //   this.relationListInDom = obj.relationListInDom;
    //   this.relationList = obj.relationListInDom;
    //   this.relationListShow = this.relationList;
    //   let childArr = [];
    //   this.resultArr = obj.resultArr || [];
    //   this.resultArr.forEach((item) => {
    //     childArr.push({
    //       id: item.entityId,
    //       entityTypeId: item.entityTypeId,
    //       entityId: item.entityId,
    //       label: item.propertyName,
    //       img: item.entityName,
    //       children: [],
    //     });
    //   });
    //   this.dataGap.children = childArr;
    //   await this.$nextTick();
    //   this.render();
    //   // this.graph.data(this.dataGap);
    //   // this.graph.render();
    //   // this.graph.fitCenter();
    //   // console.log(22);
    // },
    onRelationSearch() {
      if (!this.relationSearch) {
        this.relationListShow = this.relationListInDom;
        return;
      }
      this.relationListShow = this.relationListInDom.filter(
        (relation) =>
          relation.relationShowName.indexOf(this.relationSearch) !== -1
      );
      this.selectedCategoryId = null;
    },
    render() {
      const defaultLayout = {
        type: "compactBox",
        direction: "LR",
        getId: function getId(d) {
          return d.id;
        },
        getHeight: function getHeight() {
          return 16;
        },
        getWidth: function getWidth() {
          return 16;
        },
        getVGap: function getVGap() {
          return 40;
        },
        getHGap: function getHGap() {
          return 70;
        },
      };
      // const container = document.getElementById("container");
      // const width = document.getElementById("container").scrollWidth;
      // const height =
      //   document.getElementById("container").scrollHeight || "100%";

      console.log(
        "%c [  ]-230",
        "font-size:13px; background:pink; color:#bf2c9f;",
        container
      );
      this.graph = new G6.TreeGraph({
        container: container,
        width: this.width,
        height: this.height,
        // linkCenter: true,
        maxZoom: 1,
        minZoom: 1,
        modes: {
          default: ["drag-canvas", "zoom-canvas"],
        },
        defaultNode: {
          type: "image",
          size: [40, 40],
        },
        defaultEdge: {
          type: "cubic-horizontal",
          style: {
            stroke: "#A3B1BF",
          },
        },
        layout: defaultLayout,
      });
      //节点双击事件，这里的编辑页面用的是浏览器的弹窗，也可自己编写页面进行调用
      this.graph.on("node:dblclick", (evt, element) => {
        console.log(evt, element, 111);

        const { item, target } = evt;
        const model = item.getModel();
        console.log(model);
        const targetType = target.get("type");
        const name = target.get("name");
        console.log(name, 22);
        if (!this.selectedCategoryId) {
          this.$message.warning("请先选择关系");
          return;
        }
        this.relation = this.relationList.find(
          (relation) => this.selectedCategoryId == relation.relationId
        );
        if (model.entityTypeId != this.relation?.headId) {
          this.$message.warning(
            `当前实体不存在关系 "${this.relation.relationShowName}"`
          );
          return false;
        }
        this.$refs.entityRef.show({
          id: model.id,
          resultArr: this.resultArr,
          entityTypeId: model.entityTypeId,
          entityId: model.entityId,
          img: model.img,
          label: model.label,
          selectedCategoryId: this.selectedCategoryId,
          relationListInDom: this.relationListInDom,
        });
      });

      console.log(
        "%c [  ]-261",
        "font-size:13px; background:pink; color:#bf2c9f;",
        this.dataGap
      );
      this.graph.data(this.dataGap);
      this.graph.render();
      this.graph.fitCenter();
      // renderMap(this.dataGap, this.graph);
    },
    // 加带关系的节点
    addNode(obj) {
      this.graph.addChild(obj.data, obj.id);
      this.$emit("update", {
        relationArr: obj.relationArr,
        dataGap: this.dataGap,
      });
    },
    // 仅给根节点加实体
    addChildFun(obj) {
      let data = {
        id: obj.entityId,
        entityTypeId: obj.entityTypeId,
        entityId: obj.entityId,
        label: obj.propertyName,
        img: obj.entityName,
        children: [],
      };
      if (Object.keys(this.graph).length == 0) {
        this.render();
      }
      this.graph.addChild(data, "root");
      this.$emit("update", {
        dataGap: this.dataGap,
      });
    },
    handleData(val, entityId) {
      if (val.children.length > 0) {
        val.children.forEach((item) => {
          if (item.entityId == entityId) {
            this.graph.removeChild(item.id);
          }
          this.handleData(item, entityId);
        });
      }
    },
    removeNode(id) {
      this.graph.removeChild(id);
      this.handleData(this.dataGap, id);
      this.graph.data(this.dataGap);
      this.graph.render();
      this.graph.fitCenter();
    },
  },
};
function guid() {
  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
    let r = (Math.random() * 16) | 0,
      v = c == "x" ? r : (r & 0x3) | 0x8;

    return v.toString(16);
  });
}
</script>

<style scoped lang="scss">
@media screen and (min-width: 200px) and (max-width: 1600px) {
  #container {
    margin-top: 1%;
    height: 350px;
  }
}
@media screen and (min-width: 1601px) {
  #container {
    height: 500px;
    margin-top: 2%;
  }
}
.annotation-main {
  display: flex;
  justify-content: space-between;
  height: calc(100vh - 120px);
  width: 100%;
  background-color: #fff;
  border-radius: 4px;
  &:fullscreen {
    height: 100%;
    padding: 30px;
  }
  .entity {
    // padding: 0 40px;
    flex-shrink: 0;
    margin: 0 auto;
    width: 280px;
    height: 100%;
    .entity-tree {
      height: calc(100vh - 187px);
      // overflow: auto;
      &::-webkit-scrollbar {
        display: none; /* Chrome Safari */
      }
      ::v-deep .el-tree-node {
        margin-top: 12px;
        .el-tree-node__content {
          height: auto;
        }
        &:focus > .el-tree-node__content {
          background-color: #fff;
        }
        &.is-current {
          > .el-tree-node__content {
            .entity-item {
              background: rgba(75, 113, 235, 0.12);
              border: 1px solid #4b71eb;
              color: #4b71eb;
            }
          }
        }
      }
      .entity-item {
        padding: 0 16px;
        height: 32px;
        border-radius: 2px;
        border: 1px solid #dddddd;
        line-height: 32px;
        font-size: 14px;
        color: #333333;
      }
      &.el-tree {
        ::v-deep .el-tree-node__expand-icon {
          font-family: "iconfont2" !important;
          font-size: 14px;
          font-style: normal;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
        ::v-deep .el-icon-caret-right:before {
          // 未展开
          content: "\e65b";
        }
        ::v-deep .expanded:before {
          content: "\e65a";
          // 展开
        }
        ::v-deep .expanded {
          // 展开不旋转
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }
      }
    }
  }
  .article {
    flex-grow: 1;
    width: 100%;
    overflow: auto;
    border: 1px solid #dddddd;
    box-shadow: inset 0px 0px 0px 16px #f3f4f8;
    padding: 16px;
    border-radius: 4px;
    ::v-deep .w-e-text-container {
      background-color: rgba(0, 0, 0, 0);
    }
    .article-tool-bar {
      margin: 10px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .km-button {
        border-color: $--color-primary;
        color: $--color-primary;
        .iconfont2 {
          font-size: 12px;
          margin-right: 8px;
        }
      }
    }
    > .article-annotation {
      height: calc(100% - 52px);
      overflow: overlay;

      &::-webkit-scrollbar-track-piece {
        background: #d3dce600;
      }

      &::-webkit-scrollbar {
        width: 6px;
        height: 6px;
      }

      &::-webkit-scrollbar-thumb {
        background: #b7bbc700;
        border-radius: 20px;
      }
      &:hover::-webkit-scrollbar-thumb {
        background: #b7bbc7;
      }
    }
    &::-webkit-scrollbar {
      display: none; /* Chrome Safari */
    }
  }
  .relationBlock {
    // flex-shrink: 0;
    width: 280px;
    .relation-tree {
      height: calc(100vh - 187px);
      overflow: hidden auto;

      &::-webkit-scrollbar {
        display: none; /* Chrome Safari */
      }
      .relation-tree-list {
        display: flex;
        flex-direction: column;
      }
      .el-radio.is-bordered,
      .el-radio.is-bordered + .el-radio.is-bordered {
        margin: 10px 20px 0px 0px;
      }
    }
    .el-tag {
      margin: 10px;
    }
    overflow: auto;
  }

  .contextMenu {
    position: absolute;
    border: 1px solid steelblue;
    width: 100px;
    height: auto;
    padding: 3px;
    border-radius: 3px;
    background-color: #fff;
    z-index: 99999;
    li {
      list-style: none;
      width: 100%;
      height: 24px;
      line-height: 24px;
      font-size: 14px;
      display: inline-block;
      padding: 0;
      margin: 0 0 3px 0px;
      a {
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: black;
        &:hover {
          background-color: rgba(77, 112, 190, 0.1);
          color: white;
        }

        &:active {
          background-color: rgba(77, 112, 190, 1);
        }
      }
    }
  }
  #relation-line {
    position: absolute;
  }

  ::v-deep .canvasBox {
    position: relative;
    display: inline-block;
    #wangEditor {
      width: 100%;
      height: 100%;
      color: #000;
      .multiple-ontology {
        display: inline-flex;
        flex-direction: column;
        vertical-align: bottom;
        border-radius: 2px;
        border: 1px solid #1e253d;
        padding: 0 3px 3px 3px;
        .ontology {
          margin-top: 3px;
        }
      }
      .ontology {
        display: inline-flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        vertical-align: bottom;
        border-radius: 2px;
        text-indent: 0px;
        text-align: center;
        padding: 2px 2px 0 2px;
        // &[type="attribute"] {
        //   .ontology-type {
        //     background-color: #c2fcfc !important;
        //   }
        // }
        .ontology-type {
          border-radius: 2px;
          cursor: pointer;
          margin-bottom: 2px;
          padding: 3px;
          background-color: #fff !important;
          // font-size: 50%;
          width: 100%;
        }
      }
      div,
      p,
      span,
      strong {
        background-color: transparent !important;
      }
    }
    canvas {
      position: absolute;
      top: 0;
      left: 0;
    }
    .relationLabel {
      color: #000;
      background: #fff;
      z-index: 2;
      max-width: 100px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      border-radius: 5px;
      padding: 1px;
    }
  }
  .km-form.el-form {
    .el-form-item {
      margin-right: 0px;
      .km-input {
        width: 180px;
        height: 32px;
        background: #ffffff;
        line-height: 32px;
        ::v-deep .el-input__inner {
          border: 1px solid #dddddd;
          border-radius: 2px 0px 0px 2px;
          height: 32px;
          line-height: 32px;
        }
      }
      .km-button {
        border-radius: 0px 2px 2px 0px;
        width: 60px;
        height: 32px;
        padding: 0;
      }
      ::v-deep .el-form-item__content {
        line-height: 32px;
      }
    }
  }
}
</style>
